<!-- 功能预览 -->
<template>
    <div class="function-preview">
        <el-form label-position="top" class="function-preview-content">
            <!-- 拨打电话 -->
            <template v-if="eventData.action === 'call'">
                <div class="function-call">
                    <el-form-item label="电话号码" label-width="70px">
                        <el-input
                            v-model="eventData['call-phone-num']"
                            placeholder="请输入电话号码"
                        />
                    </el-form-item>
                </div>
            </template>
            
            <!-- 复制 -->
            <template v-if="eventData.action === 'copy'">
                <div class="function-copy">
                    <el-form-item label="复制内容" label-width="70px">
                        <el-input
                            v-model="eventData['copy-content']"
                            type="textarea"
                            :rows="5"
                            placeholder="请输入复制内容"
                        />
                    </el-form-item>
                </div>
            </template>

            <!-- 添加通讯录 -->
            <template v-if="eventData.action === 'add-contact'">
                <div class="function-add-contact">
                    <el-form-item label="联系人名称">
                        <el-input
                            v-model="eventData['add-contact-first-name']"
                            placeholder="请输入联系人名称"
                        />
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input
                            v-model="eventData['add-contact-mobile-phone-number']"
                            placeholder="请输入手机号"
                        />
                    </el-form-item>
                    <el-form-item label="公司">
                        <el-input
                            v-model="eventData['add-contact-organization']"
                            placeholder="请输入公司名称"
                        />
                    </el-form-item>
                </div>
            </template>

            <!-- 跳转小程序 -->
            <template v-if="eventData.action === 'turn-to-xcx'">
                <div class="function-turn-to-xcx">
                    <el-form-item label="小程序设置">
                        <div class="row-wrap">
                            <si-select
                                v-model="eventData['xcx-id']"
                                :list="xcxList"
                                label-key="name"
                                value-key="id"
                                show-refresh
                                :refresh-loading="xcxLoading"
                                @refresh="getXcxList"
                                @select="onSelectXcx"
                            />
                            <el-button
                                type="primary"
                                class="right-wrap"
                                @click="handleOpenAdmin('app-module/white-list-manage')"
                            >
                                管理
                            </el-button>
                        </div>
                    </el-form-item>
                    <template v-if="!!eventData['xcx-id']">
                        <div class="xcx-content">
                            当前配置信息：<br />
                            APPID：{{ eventData['xcx-appid'] || '——' }}<br />
                            页面路径：{{ eventData['xcx-page-url'] || '——' }}<br />
                        </div>
                    </template>
                </div>
            </template>

            <!-- WIFI -->
            <template v-if="eventData.action === 'wifi'">
                <div class="function-wifi">
                    <el-form-item label="WiFi名">
                        <el-input
                            v-model="eventData['wifi-name']"
                            placeholder="请输入WiFi名"
                        />
                    </el-form-item>
                    <el-form-item label="WiFi密码">
                        <el-input
                            v-model="eventData['wifi-password']"
                            placeholder="请输入WiFi密码"
                        />
                    </el-form-item>
                    <el-form-item label="MAC地址">
                        <el-input
                            v-model="eventData['wifi-address']"
                            placeholder="请输入MAC地址 34:80:B3:28:AD:3E"
                        />
                    </el-form-item>
                </div>
            </template>

            <!-- 回到顶部 -->
            <template v-if="eventData.action === 'top'">
                <div class="function-top">
                    <div class="content-title">示例：</div>
                    <div class="content-image">
                        <el-image
                            :src="actionTopImage"
                            fit="fill"
                        ></el-image>
                    </div>
                </div>
            </template>

            <!-- 侧边栏控制 -->
            <template v-if="eventData.action === 'sidebar-control'">
                <div class="function-sidebar-control">
                    <el-form-item label="操作侧边栏">
                        <si-select
                            v-model="eventData['sidebarControl']['sidebarId']"
                            :list="sidebarList"
                            label-key="name"
                            value-key="id"
                            style="width:100%"
                        />
                    </el-form-item>
                    <el-form-item label="操作内容">
                        <el-radio-group v-model="eventData['sidebarControl']['action']">
                            <el-radio label="show">弹出侧边栏</el-radio>
                            <el-radio label="hide">关闭侧边栏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
            </template>

            <!-- 侧边栏控制 -->
            <template v-if="eventData.action === 'popup-window-control'">
                <div class="function-popup-window-control">
                    <el-form-item label="操作弹窗" label-width="70px">
                        <si-select
                            v-model="eventData['windowControl']['popupWindowId']"
                            :list="popupWindowList"
                            label-key="name"
                            value-key="id"
                            style="width:100%"
                        />
                    </el-form-item>
                    <el-form-item label="操作内容" label-width="70px">
                        <el-radio-group v-model="eventData['windowControl']['action']">
                            <el-radio label="show">弹出弹窗</el-radio>
                            <el-radio label="hide">关闭弹窗</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
            </template>

            <!-- 分享好友 -->
            <template v-if="eventData.action === 'share'">
                <div class="function-share">
                    <el-form-item label="分享描述" label-width="70px">
                        <el-input
                            v-model="eventData.desc"
                            placeholder="请输入分享描述"
                        />
                    </el-form-item>
                    <el-form-item label="分享图片" label-width="70px">
                        <image-picker
                            v-model="eventData.shareImage"
                            :show-label="false"
                            :size="50"
                            type="image"
                        />
                    </el-form-item>
                </div>
            </template>

            <!-- 分享朋友圈 -->
            <template v-if="eventData.action === 'page-share'">
                <div class="function-page-share">
                    <el-form-item label="自定义文字">
                        <el-input
                            v-model="eventData.pageShareCustomText"
                            placeholder="请输入自定义文字"
                        />
                    </el-form-item>
                    <el-form-item label="自定义图片">
                        <image-picker
                            v-model="eventData.pageShareImgUrl"
                            :show-label="false"
                            :size="50"
                            type="image"
                        />
                    </el-form-item>
                </div>
            </template>

            <!-- 自定义事件 -->
            <template v-if="eventData.action === 'action-custom'">
                <div class="function-action-custom">
                    <el-form-item label="事件设置" label-width="70px">
                        <div class="row-wrap">
                            <el-select
                                v-model="eventData['action-custom-content']"
                                placeholder="请选择"
                                style="width:100%"
                            >
                                <el-option-group label="页面事件(自定义)">
                                    <el-option
                                        v-for="(item, index) in pageEventList"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-option-group>
                            </el-select>
                            <el-button
                                type="primary"
                                class="right-wrap"
                                @click="onAdminPageEvent"
                            >
                                管理
                            </el-button>
                        </div>
                    </el-form-item>
                </div>
            </template>

            <!-- 客服 -->
            <template v-if="eventData.action === 'contact'">
                <div class="function-contact">
                    <div class="content-title">示例：</div>
                    <div class="content-image">
                        <el-image
                            :src="actionContactImage"
                            fit="fill"
                        ></el-image>
                    </div>
                </div>
            </template>

            <!-- 视图控制 -->
            <template v-if="eventData.action === 'view-control'">
                <div class="function-view-control">
                    <div class="content-title">点击该组件时：</div>
                    <el-button @click="onAddViewControl">添加逻辑</el-button>
                    <template v-for="(item, index) in eventData.viewControl" :key="index">
                        <div class="row-wrap">
                            <el-select
                                :placeholder="item.viewId ? getViewControlWidgetText(item.viewId) : '选择视图'"
                                :class="{
                                    'active': item.viewId
                                }"
                                class="row-item select-btn"
                                @click.native.prevent.stop.capture="onSelectViewControlWidget(item)"
                                style="width:100%"
                            >
                            </el-select>
                            <el-select v-model="item.action" placeholder="选择动作" class="row-item" style="width:100%">
                                <el-option
                                    v-for="(actionItem, actionIndex) in viewControlActionList"
                                    :key="actionIndex"
                                    :label="actionItem.label"
                                    :value="actionItem.value"
                                >
                                </el-option>
                            </el-select>
                            <el-button class="row-item-btn" @click="onDeleteViewControl(index)">删除</el-button>
                        </div>
                    </template>
                </div>
            </template>

            <!-- 客服 -->
            <template v-if="eventData.action === 'preview-picture'">
                <div class="function-preview-picture">
                    <div class="content-title">示例：</div>
                    <div class="content-image">
                        <el-image
                            :src="previewPictureImage"
                            fit="fill"
                        ></el-image>
                    </div>
                </div>
            </template>

            <!-- 跳转表单 -->
            <template v-if="eventData.action === 'turn-to-form-generator'">
                <div class="function-turn-to-form-generator">
                    <el-form-item label="数据来源" label-width="70px">
                        <div class="row-wrap">
                            <si-select
                                v-model="eventData['form-gen-id']"
                                :list="formList"
                                show-refresh
                                :refresh-loading="formLoading"
                                @refresh="getFormList"
                            />
                            <el-button
                                type="primary"
                                class="right-wrap"
                                @click="handleOpenAdmin('functions/app-data')"
                            >
                                管理
                            </el-button>
                        </div>
                    </el-form-item>

                    <template v-if="eventData['form-gen-id']">
                        <el-form-item label="表单场景" label-width="70px">
                            <si-select
                                v-model="eventData['form-gen-action-type']"
                                :list="[
                                    { label: '新增', value: 'add' },
                                    { label: '更新', value: 'update' }
                                ]"
                                style="width:100%;"
                            />
                        </el-form-item>

                        <template v-if="eventData['form-gen-action-type'] === 'update'">
                            <el-form-item label="数据标识" label-width="70px">
                                <el-input
                                    v-model="eventData['form-gen-data-id']"
                                    placeholder="请输入数据标识"
                                />
                            </el-form-item>
                        </template>
                    </template>
                </div>
            </template>

            <!-- 跳转小程序页面 -->
            <template v-if="eventData.action === 'turn-to-xcx-page-url'">
                <div class="function-turn-to-xcx-page-url">
                    <el-form-item label="跳转路径" label-width="70px">
                        <el-input
                            v-model="eventData['xcx-page-url']"
                            placeholder="请输入跳转路径 /pages/index/index"
                        />
                    </el-form-item>
                </div>
            </template>

            <!-- 跳转H5链接 -->
            <template v-if="eventData.action === 'turn-to-h5'">
                <div class="function-turn-to-h5">
                    <el-form-item label="跳转链接" label-width="70px">
                        <el-input
                            v-model="eventData['turn-to-h5-url']"
                            placeholder="请输入H5链接"
                        />
                        <div class="tip-txt" style="margin-top: 8px;">可填写关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名</div>
                    </el-form-item>
                </div>
            </template>

            <!-- 发送订阅消息 -->
            <template v-if="eventData.action === 'request-subscribe-message'">
                <div class="function-request-subscribe-message">
                    <el-form-item label="订阅消息" label-width="70px">
                        <div class="row-wrap">
                            <si-select
                                :modelValue="!!eventData['template-ids'] ? eventData['template-ids'].split(',') : []"
                                @update:modelValue="val => eventData['template-ids'] = val.join(',')"
                                :list="subscribeMessageList"
                                show-refresh
                                multiple
                                :refresh-loading="subscribeMessageLoading"
                                @refresh="getSubscribeMessageList"
                            />
                            <el-button
                                type="primary"
                                class="right-wrap"
                                @click="handleOpenAdmin('system-setting-manage/message-template')"
                            >
                                管理
                            </el-button>
                        </div>
                    </el-form-item>
                    <div class="tip-txt" style="margin-top: 8px;">注：仅支持微信小程序</div>
                </div>
            </template>

            <!-- 显示弹窗 -->
            <template v-if="eventData.action === 'show-modal'">
                <div class="function-show-modal">
                    <el-form-item label="标题">
                        <el-input v-model="eventData.showModalConfig.title" />
                    </el-form-item>

                    <el-form-item label="内容">
                        <el-input v-model="eventData.showModalConfig.content" />
                    </el-form-item>

                    <el-form-item label="显示取消按钮">
                        <el-switch v-model="eventData.showModalConfig.showCancel" />
                    </el-form-item>

                    <el-form-item label="取消按钮文字">
                        <el-input v-model="eventData.showModalConfig.cancelText" />
                    </el-form-item>

                    <el-form-item label="确认按钮文字">
                        <el-input v-model="eventData.showModalConfig.confirmText" />
                    </el-form-item>

                    <el-divider></el-divider>
                    <el-form-item label="确定后">
                        <si-click-event v-model:event="eventData.showModalConfig.confirm" />
                    </el-form-item>
                    <el-form-item label="取消后">
                        <si-click-event v-model:event="eventData.showModalConfig.cancel" />
                    </el-form-item>
                </div>
            </template>

        </el-form>
        
        <function-view-control ref="functionViewControlRef" />
    </div>
</template>

<script>
import { defineComponent, defineAsyncComponent, toRefs, ref, computed, onMounted } from 'vue'
import { useEditStore } from '@/store'
import { getXcxWhiteList, getObjectList, getMessageTemplateList } from '@/api/app'
import { openAdmin } from '@/libs/util'
import useEventData from '@/libs/edit/eventData'
import actionTopImage from '@/assets/images/action-top.png'
import actionContactImage from '@/assets/images/action-contact.png'
import previewPictureImage from '@/assets/images/preview-picture.png'
import { setLeftTabActive } from '@/view/edit/components/edit-left'
import { closeSiClickEvent } from '../../../../index'
import FunctionViewControl from './function-view-control'
import SiSelect from '../../../../../si-select'
export default defineComponent({
    name: 'FunctionPreview',
    components: {
        FunctionViewControl,
        SiSelect,
        SiClickEvent: defineAsyncComponent(()  => import('../../../../si-click-event.vue')) // 子组件引用父组件，需要异步注册
    },
    props: {
        eventData: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { eventData } = toRefs(props)

        const editStore = useEditStore()

        const {
            pageEvents
        } = useEventData()

        const pageData = computed(() => editStore.pageData)
        const widgetList = computed(() => editStore.widgetList)
        const widgetListFlat = computed(() => editStore.widgetListFlat)
        // 侧边栏控件列表
        const sidebarList = computed(() => widgetList.value.filter(item => item.eles.type === 'sidebar').map(item => ({
            id: item.eles.customFeature.id,
            name: item.eles.customFeature.name
        })))
        // 弹窗控件列表
        const popupWindowList = computed(() => widgetList.value.filter(item => item.eles.type === 'popup-window').map(item => ({
            id: item.eles.customFeature.id,
            name: item.eles.customFeature.name
        })))
        // 页面事件列表
        const pageEventList = computed(() => {
            const list = pageData.value?.customFeature?.fx?.pageFx || []
            return list.filter(item => {
                return pageEvents.every(n => n.value != item.fxName )
            }).map(item => ({
                label: item.fxTitle,
                value: item.fxName
            }))
        })

        onMounted(() => {
            getXcxList()
            getFormList()
            getSubscribeMessageList()
        })

        const xcxList = ref([])
        const xcxLoading = ref(false)
        // 获取跳转小程序列表
        const getXcxList = () => {
            xcxLoading.value = true
            getXcxWhiteList().then(res => {
                if (res.Status === 1) {
                    const list = res?.Data?.records || []
                    xcxList.value = list.map(item => ({
                        id: item.Id,
                        appId: item.TargetId,
                        name: item.TargetName,
                        path: item.TargetPagePath
                    }))
                }
            }).finally(() => {
                xcxLoading.value = false
            })
        }
        // 选中小程序
        const onSelectXcx = data => {
            Object.assign(eventData.value, {
                'xcx-id': data.id,
                'xcx-appid': data.appId,
                'xcx-page-url': data.path
            })
        }

        const formList = ref([])
        const formLoading = ref(false)
        // 获取跳转表单列表
        const getFormList = () => {
            formLoading.value = true
            getObjectList({
                page: 1,
                pageSize: 9999
            }).then(res => {
                if (res.code === 200) {
                    const list = res?.data?.records || []
                    formList.value = list.map(item => ({
                        label: item.name,
                        value: item.id
                    }))
                }
            }).finally(() => {
                formLoading.value = false
            })
        }
        // 选中表单
        const onSelectForm = data => {
            Object.assign(eventData.value, {
                'form-gen-id': data.id
            })
        }

        const functionViewControlRef = ref(null)
        const viewControlActionList = computed(() => ([
            { label: '显示', value: 'show' },
            { label: '隐藏', value: 'hide' },
            { label: '显示/隐藏', value: 'toggle' }
        ]))
        const getViewControlWidgetText = id => {
            return widgetListFlat.value?.[id]?.widgetData?.component?.title || ''
        }
        // 添加视图控制逻辑
        const onAddViewControl = () => {
            eventData.value.viewControl.push({
                viewId: '',
                action: ''
            })
        }
        // 删除视图控制逻辑
        const onDeleteViewControl = index => {
            eventData.value.viewControl.splice(index, 1)
        }
        // 选中视图控制控件
        const onSelectViewControlWidget = data => {
            functionViewControlRef.value.show(data.viewId).then(id => {
                data.viewId = id
            }).catch(() => {})
        }

        const subscribeMessageList = ref([])
        const subscribeMessageLoading = ref(false)
        // 获取订阅消息列表
        const getSubscribeMessageList = () => {
            subscribeMessageLoading.value = true
            getMessageTemplateList({
                page: 1,
                pageSize: 9999
            }).then(res => {
                if (res.code === 200) {
                    const list = res?.data?.records || []
                    subscribeMessageList.value = list.map(item => ({
                        label: item['template_title'],
                        value: item['template_id']
                    }))
                }
            }).finally(() => {
                subscribeMessageLoading.value = false
            })
        }

        // 打开后台管理
        const handleOpenAdmin = path => {
            openAdmin({ path })
        }

        // 管理页面事件
        const onAdminPageEvent = () => {
            // 关闭点击事件弹窗
            closeSiClickEvent()
            // 打开事件设置面板
            setLeftTabActive('event')
        }

        return {
            actionTopImage,
            actionContactImage,
            previewPictureImage,

            eventData,
            sidebarList,
            popupWindowList,
            pageEventList,

            xcxList,
            xcxLoading,
            getXcxList,
            onSelectXcx,

            formList,
            formLoading,
            getFormList,
            onSelectForm,

            functionViewControlRef,
            viewControlActionList,
            getViewControlWidgetText,
            onAddViewControl,
            onDeleteViewControl,
            onSelectViewControlWidget,

            subscribeMessageList,
            subscribeMessageLoading,
            getSubscribeMessageList,

            handleOpenAdmin,
            onAdminPageEvent
        }
    }
})
</script>

<style lang="less" scoped>
@import './function-preview.less';
</style>